<template>
	<div>
		<view class="w100 header flex-row flex-al flex-jc">
			<view class="flex-row flex-al ser-box">
				<text class="iconfont icon-sousuo"></text>
				<input placeholder="搜公交路线" @confirm="searchFor" confirm-type="search" focus></input>
			</view>
		</view>
		<image class="lode" src="/static/imgs/loding.png" v-if="!lines.length"></image>

			<view class="sites flex-row flex-sb flex-al"  v-for="(l,i) in lines"  @click="toLined(l)" >
				<view :class="l.isUpDown=='1'?'line-item':'line-item line-item-back '" hover-class="line-item-hover">
					<view class="line-header flex-row flex-al">
						<image src="/static/imgs/bus.png"></image>
						<text>{{l.lineName+' '}}开往{{l.endStationName}}</text>
					</view>
					<view class="line-detial w90 flex-row  flex-sb ">
						<view class="line-p flex-al flex-col">
							<view class="oc"></view>
							<text>{{'始发站'}}</text>
						</view>
						<view class="line-center flex-col flex-al w100">
							<image src="/static/imgs/sanjiao.png"></image>
							<view class="line-line w100"></view>
							<text>全程{{l.stationSum}}站</text>
						</view>
						<view class="line-p flex-al flex-col">
							<view class="oc"></view>
							<text>{{l.endStationName}}</text>
						</view>
					</view>
				</view>
			</view>

	</div>
</template>

<script>
	import HttpModule from "../../../../module/httpModule.js"
	const httpModule = new HttpModule();
	export default {
		data() {
			return {
				lines:[]
			}
		},
		methods: {
			searchFor(e) {
				var _this = this
				const lineName = e.detail.value
				uni.showLoading({
					title: '搜索中',
					mask:true
				})
				httpModule.getlineInfo2({
					routeName:lineName
				}).then(data => {
					// const lines = data.data.getlineInfo
					const lines = data.data.data
					console.log(lines)
					this.lines=lines
					uni.hideLoading()
					if (!lines.length) {
						uni.showToast({
							title: '无您检索的线路',
							icon: 'none',
							duration: 1000,
							position:'bottom'
						})
					}
				})
			},
			toLined(l) {
				// lineName
			   uni.navigateTo({
			     url: `/pages/realRime/line/index/index?lineNo=${l.lineNo}&source=${l.source}&isUpDown=${l.isUpDown}&lineName=${l.lineName}`,
			   })
			}
		}
	}
</script>

<style scoped>
	.header {
		height: 161rpx;
		background: #fff
	}

	.ser-box {
		width: 654rpx;
		height: 92rpx;
		border-radius: 7rpx;
		border: 1rpx solid rgba(151, 151, 151, 1);
	}

	.ser-box text {
		margin-left: 38rpx;
		margin-right: 17rpx;
		color: #6D6D6D
	}

	.ser-box input {
		font-size: 32rpx;
		height: 92rpx;
		width: 100%;
		color: #6D6D6D
	}

	.lode {
		display: block;
		width: 384rpx;
		height: 235rpx;
		margin: 0 auto;
		margin-top: 300rpx;
	}

	.line-box {
		width: 750rpx;
		padding-bottom: 44rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 10rpx;
	}

	.site-header {
		width: 654rpx;
		margin: 0 auto;
		padding-top: 34rpx;
	}

	.site-header-left image {
		width: 42rpx;
		height: 42rpx;
		margin-right: 9rpx;
	}

	.site-header-left .site-name {
		font-size: 32rpx;
		font-weight: bolder;
		color: rgba(42, 42, 42, 1);
		margin-right: 16rpx;
	}

	.sites {
		width: 654rpx;
		margin: 0 auto;
		margin-top: 23rpx;
	}

	.sites .line-item {
		margin-top: 14rpx;
		width: 657rpx;
		background: linear-gradient(36deg, rgba(41, 171, 204, 1) 0%, rgba(84, 194, 193, 1) 100%);
		border-radius: 7rpx;
		padding-bottom: 20rpx
	}

	.sites .line-item-back {

		background: linear-gradient(45deg, rgba(224, 125, 105, 1) 0%, rgba(249, 157, 96, 1) 100%);

	}

	.line-item-hover {
		transform: scale(1.05)
	}

	.line-header {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.line-header image {
		width: 31rpx;
		height: 31rpx;
		margin-right: 18rpx;
	}

	.line-header text {
		font-size: 27rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.line-name {
		max-width: 80%;
		min-width: 80%;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		margin-top: 15rpx;
		white-space: nowrap;
	}

	.line-detial {
		margin-top: 24rpx;
	}

	.oc {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		margin-bottom: 28rpx;
		background: rgba(255, 255, 255, 1);
	}

	.line-p text {
		font-size: 27rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		white-space: nowrap;

	}

	.line-center {
		margin-top: 13rpx;
		position: relative
	}

	.line-center image {
		position: absolute;
		top: -8.5rpx;
		right: -10rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.line-center text {
		font-size: 25rpx;
		color: rgba(255, 255, 255, 1);
		margin-top: 8rpx;

	}

	.line-line {
		width: 100%;
		border-bottom: 1rpx solid #fff;
	}
</style>
